<script>
import "vant/es/toast/style";
import router from "@/router";
import { ref } from "@vue/reactivity";
import { Toast } from "vant";
import { useStore } from "vuex";
export default {
  setup() {
    // 返回上一层
    let goBack = () => {
      router.go(-1);
    };
    // 随机验证码
    let str = "";
    // 手机号
    let phone = ref("");
    // 验证码
    let ranNum = ref("");

    // 清除
    let clear = () => {
      phone.value = "";
    };
    // 密码
    let password = ref();
    // 获取验证码
    let goNum = () => {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(phone._value)) {
        Toast("请输入正确手机号");
      } else {
        // 随机4位验证码
        let str1 = "";
        for (let i = 0; i < 4; i++) {
          str1 += parseInt(Math.random() * 10);
        }
        str = str1;
        console.log(str);
        Toast("验证码是：" + str);
      }
    };
    // 注册
    let goSet = () => {
      if (ranNum.value == str) {
        console.log("成功");
        window.sessionStorage.setItem(
          "data",
          JSON.stringify({
            phone: phone,
            password: password,
          })
        );
        console.log(password.value);

        Toast("注册成功");
        setTimeout(function () {
          router.push({
            path: "/login",
          });
        }, 200);
      } else {
        console.log("失败");
      }
    };

    let showeye = ref("false");

    let change = () => {
      showeye.value = !showeye.value;
    };
    let store = useStore();
    console.log(store);

    return {
      goBack,
      goNum,
      phone,
      ranNum,
      password,
      clear,
      goSet,
      change,
      showeye
    };
  },
};
</script>




<template>
  <div class="container">
    <div class="box1">
      <div class="box">
        <!-- 头部返回键 -->
        <div class="top">
          <div @click="goBack">
            <i></i>
          </div>
        </div>

        <!-- 手机注册 -->
        <div class="logo">手机号注册</div>
        <!-- 三个输入框 -->
        <div class="text">
          <input type="number" placeholder="请输入手机号" v-model="phone" />
          <i class="clear" @click="clear"></i>

          <input type="text" placeholder="请输入短信验证码" v-model="ranNum" />
          <span class="send" @click="goNum">发送验证码</span>
          <input
            :type="showeye ? 'password' : 'textpassword'"
            placeholder="请设置您的登录密码(6-20位任意字符)"
            v-model="password"
            
          />
          <span :class="[showeye ? 'eye' : 'eyes']" @click="change"></span>
        </div>

        <!-- 注册 -->
        <div>
          <div class="login">
            <h4 @click="goSet">注册</h4>
          </div>

          <!-- 协议 -->
          <div class="alary">
            <h6>点击注册代表您已阅读和同意<span>《星火用户注册协议》</span></h6>
          </div>
        </div>

        <!-- 底部 -->
        <div class="bottom">
          <div class="text1">
            <h6>*温馨提示：该账户在以下应用中通用</h6>
          </div>

          <div class="big-text">
            <div class="text2">
              <i></i>
              <h6>巅峰训练</h6>
            </div>

            <div class="text3">
              <i></i>
              <h6>星火英语</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "../assets/css/base.css";

.box {
  display: flex;
  flex-direction: column;
}

.box1 {
  display: flex;
  flex-direction: column;
}

.box .top {
  display: flex;
  height: 42px;
  justify-content: space-between;
  align-items: center;
}

.box .top i {
  display: block;
  background-image: url(../assets/img/back.eb96d29.png);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  width: 22px;
  height: 22px;
  margin-left: 17px;
}

.box .logo {
  height: 110px;
  line-height: 110px;
  font-size: 22px;
  padding-left: 40px;
  font-weight: bolder;
}

.box .text {
  display: flex;
  flex-direction: column;
  margin-top: 43px;
  position: relative;
}

.box .text input {
  height: 52px;
  border-bottom: 1px solid #f0f0f0;
  margin-left: 36px;
  margin-right: 36px;
  font-size: 16px;
}

.box .text > .clear {
  position: absolute;
  display: block;
  top: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
  background-image: url(../assets/img/ic_clean.822fd1d.png);
  background-size: 14px 14px;
}

.box .text > .eye {
  position: absolute;
  display: block;
  bottom: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
  background-image: url(../assets/img/ic_closei.3680308.png);
  background-size: 14px 14px;
}

.box .text > .eyes {
  position: absolute;
  display: block;
  bottom: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
  background-image: url(../assets/img/ic_open.0554c0f.png);
  background-size: 14px 14px;
}

.box .text > .send {
  position: absolute;
  text-align: center;
  display: block;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #4f92ce;
  color: #4f92ce;
  width: 90px;
  right: 40px;
  top: 65px;
}

.login {
  justify-content: center;
  align-items: center;
  height: 45px;
  background-color: #4c84ff;
  margin: 45px 36px 0px 36px;
  border: 1px solid #dbe1ef;
  border-radius: 5px;
}

.login h4 {
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fcfdff;
}

.alary {
  display: flex;
  margin-top: 24px;
  justify-content: center;
  //   margin-right: 36px;
}

.alary h6 {
  color: #999999;
}

.alary span {
  color: #4c84ff;
  font-size: 12px;
}

.bottom {
  margin-top: 90px;
  color: #c2c2c2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom .text1 {
  height: 43px;
  line-height: 43px;
}

.bottom .big-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.bottom .big-text .text2 {
  margin-left: 90px;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.bottom .big-text .text2 i {
  display: block;
  background-image: url(../assets/img/dianfengxunlian.png);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 8px;
}

.bottom .big-text .text3 {
  display: flex;
  height: 20px;
  line-height: 20px;
  margin-right: 90px;
}

.bottom .big-text .text3 i {
  display: block;
  background-image: url(../assets/img/xinghuoyingyu.png);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 3px;
}
</style>